@import "../global/variable"


.videosLineBox
  list-style: none
  padding: 0 10px
  margin: 10px 0
  display: flex

  li
    width: 22.5%
    margin: 0 auto

  .videoBar

    .videoBox
      position: relative
      overflow: hidden
      border-radius: 10px
      transition: 0.4s

      &:hover
        border-radius: 0

      &:hover .specialVideoModel
        top: 0

      &:hover .seeLaterModel
        opacity: 1

      &:hover .seeNowModel
        opacity: 1

      &:before
        content: ""
        position: absolute
        width: 100%
        height: 100%
        left: 0
        top: 0
        background-color: rgba(0, 0, 0, 0.7)
        opacity: 0
        transition: opacity 0.4s

      &:hover:before
        opacity: 1

      img
        width: 100%
        height: 100%

    .specialVideoModel, .defaultVideoModel, .imageVideoModel, .seeLaterModel, .seeNowModel
      position: absolute
      z-index: 2

    .specialVideoModel
      top: 55%
      height: 100%
      width: 100%
      padding: 10% 5% 0
      transition: 0.4s

      h5, p
        height: 33.3%
        margin: 0
        padding: 0
        font-size: 16px

      p
        font-size: 12px

    .defaultVideoModel, .imageVideoModel
      top: 0
      height: 100%
      width: 100%
      padding: 47.5% 5% 0 5%
      font-size: 14px

      span
        margin-right: 5px

    .seeLaterModel
      bottom: 5%
      right: 5%
      text-align: center !important
      opacity: 0
      color: $mainColor
      transition: 0.4s

      p
        position: relative
        top: -3px
        margin: 0
        padding: 5px
        font-size: 14px
        cursor: default
        background-color: rgba(0, 0, 0, 0.7)
        border-radius: 5px
        opacity: 0
        float: left
        transition: 0.4s

      i
        font-size: 24px
        cursor: pointer

      i:hover + p
        opacity: 1

    .seeNowModel
      top: 50%
      left: 50%
      padding: 10px
      border-radius: 5px
      background-color: rgba(0, 0, 0, 0.7)
      transform: translate(-50%, -50%)
      transition: opacity 0.4s
      opacity: 0

  .videoDataBar
    position: relative
    display: block
    padding: 5px 10px

    .defaultObjectData
      height: 64px

      p
        width: 100%
        margin: 0
        overflow: hidden        // 自动隐藏文字
        text-overflow: ellipsis // 文字隐藏后添加省略号
        display: -webkit-box
        -webkit-line-clamp: 2   // 想要显示的行数
        -webkit-box-orient: vertical

    .imageObjectData
      position: relative
      height: 64px

      img
        padding: 0
        position: relative
        top: -50%
        height: $imgSize
        width: $imgSize
        border-radius: 50%

      div
        //padding: 0
        display: inline-block
        //width: 80%

      h6, p, small
        height: auto
        width: 100%
        margin: 0
        overflow: hidden        // 自动隐藏文字
        text-overflow: ellipsis // 文字隐藏后添加省略号
        display: -webkit-box
        -webkit-line-clamp: 1   // 想要显示的行数
        -webkit-box-orient: vertical

      h6
        font-size: $fontSize
        margin-bottom: 2px

      p
        margin-bottom: 8px